<script setup lang='ts'>
  import { ref } from 'vue';
  import { playState } from '@/pinia/getter'
  import cattleImg from './cattleImg.vue';
  const cattleListRef = ref()
  const prop = defineProps({
    cattleArr:{
      type:Array<any>,
      default:() => []
    },
    type:{
      type:[String,Number],
      default:''
    }
  })
</script>

<template>
  <div
    ref="cattleListRef"
    id="cattleList"
    :class="['cattleList flex-align',`cattleList${type}`]"
    :style="{
      '---playState':`${playState?'running':'paused'}`,
    }"
  >
    <cattleImg
      v-for="item in cattleArr"
      :image="item.image"
      :type="type"
      :poolId="item.poolId"
    />
    <cattleImg
      v-for="item in cattleArr"
      :image="item.image"
      :type="type"
      :poolId="item.poolId"
    />
  </div>
</template>

<style lang='scss' scoped>
.cattleList {
  position: absolute;
  width: max-content;
  // 1.8s  var(---playTime)
  // animation-fill-mode:initial;
  animation:move var(---playTime) linear infinite forwards var(---playState);
}
@keyframes move{
  0% {
    // left: 0;
    transform: translateX(0%);
  }
  100% {
    // left: -100%;
    transform: translateX(-50%);
  }
}
.cattleList1 {
  animation-direction: reverse;
  :deep(.cattleImg) {
    img {
      transform: scaleX(-1);
    }
  }
  .playCattle {
    animation-direction: alternate-reverse;
  }
}
.cattleList2 {
  top: 105px;
}
</style>